<template>
  <div style="height: 100%; background-color: #fff; padding-top: 16px">
    <div>
      <el-form ref="form" label-width="120px">
        <el-form-item label="网站标题">
          <el-input v-model="webTitle"></el-input>
        </el-form-item>
        <el-form-item label="网站Logo">
          <el-image
            v-if="isShow"
            style="width: 200px; height: 100px"
            :src="filePath + webLogoUrl"
          ></el-image>
          <el-upload
            style="width: 200px"
            :headers="headers"
            :action="actionUrl"
            :on-remove="handleWebRemove"
            :on-success="handleWebSuccess"
            :multiple="false"
            :limit="1"
            :file-list="webLogoFile"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传svg、jpg、png、jpeg、bmp文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="检索页Logo">
          <el-image
            v-if="isShow"
            style="width: 200px; height: 100px"
            :src="filePath + searchLogoUrl"
          ></el-image>
          <el-upload
            style="width: 200px"
            :headers="headers"
            :action="actionUrl"
            :on-remove="handleSearchRemove"
            :on-success="handleSearchSuccess"
            :multiple="false"
            :limit="1"
            :file-list="searchLogoFile"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传svg、jpg、png、jpeg、bmp文件
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存更改</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth';
import { getSetting, putSetting } from '@/api/serve/setting';
import { basePath } from '@/utils/request';
import store from '@/store';

export default {
  name: 'publicentry',
  data() {
    return {
      filePath: filePath,
      actionUrl: basePath + 'setting/file',
      webLogoFile: [],
      searchLogoFile: [],
      webLogoUrl: '',
      searchLogoUrl: '',
      webTitle: '',
      isShow: false,
    };
  },
  computed: {
    headers() {
      let token = getToken();
      return token ? { Authorization: token } : {};
    },
  },
  created() {
    this.getSetting();
  },
  methods: {
    getSetting() {
      getSetting().then((res) => {
        this.webTitle = res.data.title;
        this.webLogoUrl = res.data.titleLogo;
        this.searchLogoUrl = res.data.searchLogo;
        this.isShow = true;
      });
    },
    // 文件上传前的校验 —— 常见的校验有：校验文件类型，文件大小
    beforeAvatarUpload(file) {
      // 允许上传的文件格式列表
      let acceptList = ['svg', 'png', 'jpg', 'jpeg', 'bmp'];
      // 根据文件名获取文件的后缀名
      let fileType = file.name.split('.').pop().toLowerCase();
      // 判断文件格式是否符合要求
      if (acceptList.indexOf(fileType) === -1) {
        this.$message.error(
          '请按照提示上传图片，不能上传 ' + fileType + ' 格式!'
        );
        return false;
      }
    },
    handleWebRemove(file, fileList) {
      this.webLogoUrl = '';
    },
    handleSearchRemove(file, fileList) {
      this.searchLogoUrl = '';
    },
    handleWebSuccess(res, file, fileList) {
      if (!!res.code) {
        this.handleError(res);
      } else {
        // console.log('file', file, res);
        this.webLogoUrl = file.response.data;
      }
    },
    handleSearchSuccess(res, file, fileList) {
      if (!!res.code) {
        this.handleError(res);
      } else {
        this.searchLogoUrl = file.response.data;
      }
    },
    handleError(err, file, fileList) {
      this.$message.closeAll();
      this.$message.error('文件上传失败，请重试');
      this.$emit('upload-error', err);
    },
    onSubmit() {
      let data = {
        searchLogo: this.searchLogoUrl,
        title: this.webTitle,
        titleLogo: this.webLogoUrl,
      };
      putSetting(data).then((res) => {
        if (res.data) {
          //获取系统标题配置
          store.dispatch('settings/getSysSetting');
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      });
    },
    cancel() {
      this.webLogoFile = [];
      this.searchLogoFile = [];
      this.getSetting();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  width: 200px;
}
</style>
